<template>
  <div class="teamInformation-page">
    <breadcrumb />
    <div class="search-container">
      <Search @search="getSearchParams" />
    </div>
    <div class="table-container">
      <div class="table-component">
        <div class="submit-btns">
          <div></div>
          <div class="submit-btns-right">
            <el-button type="primary" class="submit-btn-add" @click="addData">
              <img class="icon-img" :src="iconAdd" alt="" />
              新增</el-button
            >
          </div>
        </div>
        <Table
          :tableData="table.data"
          :loading="table.loading"
          @table="getTableParams"
        />

        <!-- <Pagination
          :tableData="table.total"
          :pagination="pagination"
          @pagination="getPaginationParams"
        /> -->
        <div class="pagination">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="pagination.pageSizes"
            layout="total,sizes, prev, pager, next, jumper"
            :total="table.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <el-dialog
          v-model="dialogVisible"
          :title="title"
          destroy-on-close
          :before-close="handleClose"
          :close-on-click-modal="false"
          :width="
            componentTag === roadSectionComponent ||
            componentTag === tollCollectorComponent
              ? '670px'
              : componentTag === importComponent
              ? '800px'
              : '520px'"
        >
          <component
            :is="componentTag"
            @operationDone="operationDone"
            :operationId="operationId"
          >
          </component>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import breadcrumb from "@/components/breadcrumb/index.vue";
import Search from "./components/search.vue";
import Table from "./components/table.vue";
import Pagination from "./components/pagination.vue";
import iconAdd from "@/assets/image/btn/icon-add.png";
import addComponent from "./components/addComponent.vue";
import editComponent from "./components/editComponent.vue";
import roadSectionComponent from "./components/roadSectionComponent.vue";
import tollCollectorComponent from "./components/tollCollectorComponent.vue";
import { reactive, ref, shallowRef } from "vue";
import {
  getTeam,
  getTeamStatus,
  getDeleteTeam,
} from "./request.js";

// 搜索
const searchModel = ref({
  keyword: "",
  status: 1,
});
const getSearchParams = (value) => {
  // searchParams.value = value;
  searchModel.value = value;
  getData();
};

// 弹窗
const title = ref("");
const dialogVisible = ref(false);
const componentTag = shallowRef("");
const operationId = ref("");
const operationDone = (r) => {
  dialogVisible.value = false;
  operationId.value = "";
  if (!r) {
    getData();
  }
};

const handleClose = () => {
  dialogVisible.value = false;
};

// 新增按钮
const addData = () => {
  title.value = "新增班组信息";
  componentTag.value = addComponent;
  dialogVisible.value = true;
};

// 重启/停用按钮
const accountStatus = (row) => {
  ElMessageBox.confirm(
    `您确定要${row.status == true ? "停用" : "启用"}班组[${row.teamGroup}]吗？`,
    "温馨提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  ).then(async () => {
    await getTeamStatus({
      teamId: row.id,
      status: !row.status,
    }).then((res) => {
      if (res.data.code === 0) {
        getData();
        ElMessage({
          type: "success",
          message: `已${row.status == true ? "停用" : "启用"}班组[${
            row.teamGroup
          }]`,
        });
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  });
};

// 删除按钮
const deleteData = (row) => {
  ElMessageBox.confirm(`您确定要删除班组[${row.teamGroup}]吗？`, "温馨提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    await getDeleteTeam(row.id).then((res) => {
      if (res.data.code === 0) {
        getData();
        ElMessage({
          type: "success",
          message: `已删除班组[${row.teamGroup}]`,
        });
      } else {
        ElMessage.error(res.data.msg);
      }
    });
  });
};

// table操作
const getTableParams = (value) => {
  console.log("value ===>", value);
  if (value.operation === 1) {
    title.value = "编辑班组信息";
    componentTag.value = editComponent;
  } else if (value.operation === 2) {
    title.value = `配置[${value.teamGroup}]关联路段`;
    componentTag.value = roadSectionComponent;
  } else if (value.operation === 3) {
    title.value = `配置[${value.teamGroup}]关联收费员`;
    componentTag.value = tollCollectorComponent;
  } else if (value.operation === 4) {
    accountStatus(value);
    return;
  } else if (value.operation === 5) {
    deleteData(value);
    return;
  }
  operationId.value = value;
  dialogVisible.value = true;
};

const getPaginationParams = (value) => {
  console.log("value ===>", value);
};

// 表格
const table = reactive({
  data: [],
  total: 0,
  loading: true,
});

const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 50],
});

const handleCurrentChange = (value) => {
  pagination.currentPage = value;
  getData();
};

const handleSizeChange = (value) => {
  pagination.pageSize = value;
  getData();
};

const getData = async () => {
  const res = await getTeam({
    keyword: searchModel.value.keyword,
    status: searchModel.value.status,
    pageNo: pagination.currentPage,
    pageSize: pagination.pageSize,
  });
  if (res.data.code === 0) {
    table.data = res.data.result.items;
    table.total = parseInt(res.data.result.total);
    table.loading = false;
  }
};

getData();
</script>

<style lang="less" scoped>
.teamInformation-page {
  .search-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px 24px 8px 24px;
    background: #fff;
    border-radius: 6px;
  }
  .table-container {
    margin-top: 16px;
    min-height: 100%;
    padding: 24px;
    background: #fff;
    border-radius: 6px;
    .table-component {
      .submit-btns {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px;
        .submit-btns-right {
          display: flex;
        }
        .submit-btn-add {
          background: #007aff;
          border: 1px solid #007aff;
          border-radius: 2px;
          margin-left: 87px;
          padding: 5px 16px;
        }
        .icon-img {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }
      .pagination {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }
    }
  }
}
</style>